<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible, refresh" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>YOKI</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script src="jquery-1.10.1.min.js"></script>
<script src="DD_roundies_min.js"></script>
<script src="common.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
  
<style type="text/css">
html {
	font-size: 10px !important
}



/* iPhone 4 ———– */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) , only
	screen and (min-device-pixel-ratio : 1.5) {
	html {
		font-size: 10px !important
	}
}

/* iPads (portrait) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width
	: 1024px) and (orientation : portrait) {
	html {
		font-size: 20px !important
	}
}

/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	html {
		font-size: 15px !important
	}
	.autoClass {
		font-size: 1.6rem;
		color: #ffffff;
		float: left;
		left: 4.7rem;
		top: 1.7rem;
		position: absolute;
	}
	
	.voiceDescNickName{
		margin-top: 4.5rem;text-align: center;font-size: 16px;
	}
	
	.voiceDesc{
		margin-top: 2.5rem;text-align: center;font-size: 16px;
	}
	
	.praise{
	
		top: 2.5rem;text-align: center;font-size: 16px;color: #ffffff;margin-top: 3rem;
	}
	
	.downLoad{
		margin-top: 2.5rem;text-align: center;font-size: 16px;color: #ffffff;
	}
	
	
	.yokiDesc{
		font-size: 18px;position: relative;left:3rem;
		
	}
	
	.setUpYoki{
		color: #ffffff;font-size: 8px;position: relative;margin-top: 0.1rem;left: 1rem
	}
	
	.downLoadApp{
		float: right;background: #000000;margin-top: 1rem;margin-right: 0.1rem;font-size: 16px;
	}
}

/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 411px) and (max-device-width : 480px) {
	html {
		font-size: 15px !important
	}
	.autoClass {
		font-size: 1.6rem;
		color: #ffffff;
		float: left;
		left: 6rem;
		top: 2rem;
		position: absolute;
	}
}

/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 435px) and (max-device-width : 480px) {
	html {
		font-size: 15px !important
	}
	.autoClass {
		font-size: 1.6rem;
		color: #ffffff;
		float: left;
		left: 6.5rem;
		top: 2.2rem;
		position: absolute;
	}
}

/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 375px) and (max-device-width : 480px) {
	html {
		font-size: 15px !important
	}
	.autoClass {
		font-size: 1.6rem;
		color: #ffffff;
		float: left;
		left: 5.5rem;
		top: 2rem;
		position: absolute;
	}
}

/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 360px) and (max-device-width : 480px) {
	html {
		font-size: 15px !important
	}
	.autoClass {
		font-size: 1.6rem;
		color: #ffffff;
		float: left;
		left: 6rem;
		top: 2rem;
		position: absolute;
	}
}

/* Smartphones (landscape) ———– */
@media only screen and (min-width : 321px) {
	html {
		font-size: 10px !important
	}
	
	.autoClass{
		
	}
}

/* Smartphones (portrait) ———– */
@media only screen and (max-width : 320px) {
	html {
		font-size: 10px !important
	}
}

/* iPads (portrait 竖屏 and 横屏 landscape ) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	html {
		font-size: 22px !important
	}
	
	.autoClass {
		font-size: 3.5rem;
		color: #ffffff;
		float: left;
		left: 11rem;
		top: 4rem;
		position: absolute;
	}
	
	.voiceDescNickName{
		margin-top: 4.5rem;text-align: center;font-size: 35px;
	}
	
	.voiceDesc{
		margin-top: 2.5rem;text-align: center;font-size: 35px;
	}
	
	.praise{
	
		top: 2.5rem;text-align: center;font-size: 35px;color: #ffffff;margin-top: 3rem;
	}
	
	.downLoad{
		margin-top: 2.5rem;text-align: center;font-size: 35px;color: #ffffff;
	}
	
	.yokiDesc{
		font-size: 35px;position: relative;left:3rem;top: 1rem
		
	}
	
	.setUpYoki{
		color: #ffffff;font-size: 20px;position: relative;margin-top: 0.4rem;left: 1rem
	}
	
	.downLoadApp{
		float: right;background: #000000;margin-top: 2rem;margin-right: 0.1rem;font-size: 35px;
	}
}

/* iPads (landscape 横屏)  ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	html {
		font-size: 22px !important
	}
	
	.autoClass {
		font-size: 3.5rem;
		color: #ffffff;
		float: left;
		left: 14rem;
		top: 4.8rem;
		position: absolute;
	}
	
	.yokiDesc{
		font-size: 35px;position: relative;left:3rem;top: 2rem;
		
	}
	
	.setUpYoki{
		color: #ffffff;font-size: 20px;position: relative;margin-top: 2rem;left: 1rem
	}
	
	.downLoadApp{
		float: right;background: #000000;margin-top: 3rem;margin-right: 0.1rem;font-size: 35px;
	}
	
}

/* iPads (portrait) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width
	: 1024px) and (orientation : portrait) {
	html {
		font-size: 20px !important
	}
}

/* Desktops and laptops 是横向 ———– */
@media only screen and (min-width : 1224px) {
	html {
		font-size: 22px !important
	}
}


/* Desktops and laptops 是横向 ———– */
@media only screen and (min-width : 1583px) {
	html {
		font-size: 22px !important
	}
	
	.autoClass {
		font-size: 3.5rem;
		color: #ffffff;
		float: left;
		left: 13rem;
		top: 4.5rem;
		position: absolute;
	}
	
	.voiceDescNickName{
		margin-top: 4.5rem;text-align: center;font-size: 35px;
	}
	
	.voiceDesc{
		margin-top: 2.5rem;text-align: center;font-size: 35px;
	}
	
	.praise{
	
		top: 2.5rem;text-align: center;font-size: 35px;color: #ffffff;margin-top: 3rem;
	}
	
	.downLoad{
		margin-top: 2.5rem;text-align: center;font-size: 35px;color: #ffffff;
	}
	
	.yokiDesc{
		font-size: 35px;position: relative;left:3rem;top: 2rem
		
	}
	
	.setUpYoki{
		color: #ffffff;font-size: 20px;position: relative;margin-top: 2rem;left: 1rem
	}
	
	.downLoadApp{
		float: right;background: #000000;margin-top: 3rem;margin-right: 0.1rem;font-size: 35px;
	}
}



/* iPhone 4 ———– */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) , only
	screen and (min-device-pixel-ratio : 1.5) {
	html {
		font-size: 10px !important
	}
}

/* Large screens ———– */
@media only screen and (min-width : 1824px) {
	html {
		font-size: 22px !important
	}
}

hr {
	margin-top: 0px !important;;
	margin-bottom: 0px !important;;
	border: 0;
	border-top: 1px solid #eee;
}
</style>


<script type="text/javascript">

//判断访问终端 备用
var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>	
</head>
<body style="background-color:#454545;">

	<div class="container-fluid">
	
		<div class="row" style="margin-top: 2rem;text-align: center;">
			<img alt="" src="images/applogo.png"  id="yokiLogImg">
		</div>
		<div class="row" style="margin-top: 1rem;text-align: center;color: #ffffff;font-size: 2.5rem;">
			听！我的旅行故事！
		</div>
		
		<div class="row" style="top: 2.4rem;position: relative;" onclick="playOrPaused('firefox',this);" align="center">
			<!-- <audio src="" id="voiceId" controls="controls" autoplay="true" style="width: 100%;">
				your browser does not support the video tag
		    </audio> -->
				
			<!-- 背景 -->
			<div style="position: relative;text-align: center;vertical-align: middle;">
				<img alt="" src="images/voice_wave_bg_60_90.png" id="backImg">
				<!-- 音量线 -->
				<div class="autoClass">
					
					<div style="position: relative;left: 0rem;float: left;top: -0.5rem;z-index: 10" id="lineShow">
						<img alt="" src="images/voice_progress_bg.png" id="lineImg" >	
					</div>
					
					<div style="float: left;left: 0.1rem;" id="divImg" >
						<img alt="" src="images/user_head_default.png" id="headImg" class="circleCss">	
					</div>
					
					<div style="float: left;position: relative;left: 0.1rem;">
						<img alt="" src="images/voice_wave_60_90.png" id="waveImg" >
						<label id="voiceLength"></label><label>'</label>	
					</div>
				</div>
			</div>
		</div>
		
		<!-- 昵称 -->
		<div class="row voiceDescNickName" id="userNameShow">
			<div id="userName" style="color: #ffffff"></div>
		</div>
		
		<!-- 分享时间 -->
    	<div class="row voiceDesc" id="shareDateShow">
    		<div id="shareDate" style="color: #ffffff"></div>
		</div>
	    
	    <!-- 城市 -->
		<div class="row voiceDesc" id="cityNameShow">
			<div id="cityName" style="color: #ffffff"></div>
		</div>
		
		<!-- 景点 -->
		<div class="row voiceDesc" id="viewSpotNameShow">
			<div id="viewSpotName" style="color: #ffffff"></div>
		</div>
		
		<!-- 点赞 -->
		<div class="row praise">
			<div style="position: relative;margin-left: auto;margin-right: auto;text-align: center;">
				<input type="hidden" id="userVoiceId">
				<div style="text-align: center;">
					<div id="praiseCount">喜欢就戳一下这里
						<img alt="" src="images/praise.png" style="cursor: pointer;" id="likeImages" onclick="setPraise()">
					</div>
					<div id="praiseCount1" style="display: none;">
						<img alt="" src="images/praise1.png" style="cursor: pointer;" id="likeImages1">
					</div>
				</div>
			</div>
		</div>
		
		<div class="row downLoad">
			下载后开始录制自己的旅行日记
		</div>
		
		<div class="row">
			<div class="col-xs-12">
				<!-- 横线上 -->
			    <div class="form-group clearfix" style="text-align: center;position: relative;margin-top: 6rem">
			    	<hr style="background-color: #ffffff"/>
			    </div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-xs-12">
					<div style="position:relative;display: inline;">
				   		<div style="float: left;position:relative;">
				   			<img alt="" src="images/app_icon.png" id="appImg">
				   		</div>
			    	
					   	<div style="float: left;color: #ffffff;">
					   		<div class="yokiDesc">
					   			有记YOKI
					   		</div>
					   		<div class="setUpYoki">
					   			安装有记，聆听更多旅行的声音
					   		</div>
					   	</div>
					   	
					   	<div class="downLoadApp">
				   			<font color="#ffffff"><a href="" id="downloadId" style="text-decoration:none;color: #ffffff">立即下载</a></font>
				   		</div>
				   	</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-xs-12">
				<!-- 横线下 -->
			    <div class="form-group clearfix" style="text-align: center;padding-top: 0.8rem">
			    	<hr style="background-color: #ffffff"/>
			    </div>
			</div>
		</div>
    
    	<div class="row" style="text-align: center;padding-top: 8.8rem;position: relative;">
   			<img alt="" src="images/ziti.png" id="zhitiImg" >
		</div>
   
   		<div class="row" style="text-align: center;padding-top: 3.6rem;font-size: 1.6rem;position:relative;">
   			<font color="#ffffff">.有故事 ，录日记.</font>
		</div>
	   
    	<div class="row" style="text-align: center;padding-top: 6.4rem;position:relative;">
   			<img alt="" src="images/qrcode.png" id="qrcodeImg">
		</div>
	   
   		<div class="row" style="text-align: center;padding-top: 1.8rem;font-size: 1.6rem;color: #ffffff;position:relative;">
   			<u>长按二维码关注[ 有记YOKI ] 微信公众号</u>
		</div>
	    
    	<div class="row" style="text-align: center;margin-top: 5rem;margin-bottom:5.9rem;font-size: 1.2rem;color: #ffffff;position:relative;">
	   			<u>WWW.YOKIVOICE.COM</u>
		</div>
	</div>
</body>

<script type="text/javascript">
	
	var flag=false;
	//屏幕宽度
	var clientWidth = window.document.documentElement.clientWidth;
	// 计算缩放比例
	var scale =clientWidth/640;

	var audio ;
	var divOldStyle;
	function getCurrentTime(id){			
		alert(parseInt(audio.currentTime) + '：秒');
	}
	
	// 点击播放
	function playOrPaused(id,obj){
		
		var length =$('#voiceLength').text();
		var p =parseInt(length);
		if(audio.duration<p){
			return;
		}
		if(audio.paused){
			divOldStyle=$('#lineShow').attr("style"); 
			audio.currentTime=0.0;
			$('#lineShow').show(); 
			// 竖线 lineImg
			var lineImg =document.getElementById("lineImg");
			var lineWidth =3*scale;
			var lineheight =80*scale;
			lineImg.width=lineWidth;
			lineImg.height=lineheight;
			audio.play();
			
			var backImg =$("#backImg");
			var width =backImg.width();
			$("#lineShow").animate({left:"100%"},p*1100,callback);
			return;
		}
		audio.pause();
		$('#lineShow').attr("style",divOldStyle);
		$('#lineShow').stop();
		$('#lineShow').hide();
	}
	
	// 播放完成回调
	function callback(){
		$('#lineShow').attr("style",divOldStyle);
		$('#lineShow').stop();
		$('#lineShow').hide();
	}
	
	function hideOrShowControls(id,obj){
		if(audio.controls){
			audio.removeAttribute('controls');
			obj.innerHTML = '显示控制框'
			return;
		}
		audio.controls = 'controls';
		obj.innerHTML = '隐藏控制框'
		return;
	}
	
	function vol(id,type , obj){
		if(type == 'up'){
			var volume = audio.volume  + 0.1;
			if(volume >=1 ){
				volume = 1 ;
			}
			audio.volume =  volume;
		}else if(type == 'down'){
			var volume = audio.volume  - 0.1;
			if(volume <=0 ){
				volume = 0 ;
			}
			audio.volume =  volume;
		}
		document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
	}
	
	
	function muted(id,obj){
		if(audio.muted){
			audio.muted = false;
		}else{
			audio.muted = true; 
		}
	}
	
	function returnFloat1(value) {    
		value = Math.round(parseFloat(value) * 10) / 10;
		if (value.toString().indexOf(".") < 0){
			value = value.toString() + ".0";
		}
		return value;
	}
	
	$(document).ready(function(){
		
		$('#praiseCount1').hide(); 
		$('#lineShow').hide(); 
		
		var path =window.location.search;
		var pamars =path.substring(path.indexOf('?')+1);
		var fileIds =pamars.split("&")[0];
		var fileId =fileIds.substring(fileIds.indexOf("=")+1);
		var host =window.location.host;
		//audio =document.getElementById("voiceId");
		
		audio =  document.createElement("audio")
		audio.src="http://"+host+"/yokivoice/restful/upload/showPic/"+fileId;
		audio.preload=true;
		audio.addEventListener('ended', function () {  
            // 监听ended 事件
			$('#lineShow').attr("style",divOldStyle);
			$('#lineShow').stop();
			$('#lineShow').hide();
        }, false); 
		
		
		//href = "itms-services://?action=download-manifest&url=https://app.ismartwork.cn/m/community/ios/community.plist";
		var ua = navigator.userAgent.toLowerCase();
		var u = navigator.userAgent, app = navigator.appVersion;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		
		if(isAndroid){
			//http://www.yokivoice.com/yoki.apk
			document.getElementById("downloadId").setAttribute("href","/yokivoice/appDownload.html");
		}
		if(isiOS){
			if(ua.indexOf("micromessenger") > 0 ){
				document.getElementById("downloadId").setAttribute("href","/yokivoice/appDownload.html");
			}else{
				document.getElementById("downloadId").setAttribute("href","https://itunes.apple.com");
			}
		}
		
		// 顶部logo
		var yokiLogImg =document.getElementById("yokiLogImg");
		var yokiLogWidth =119*scale;
		var yokiLogHeight =166*scale;
		yokiLogImg.width=yokiLogWidth;
		yokiLogImg.height=yokiLogHeight;
		
		// 顶部logo
		var appImg =document.getElementById("appImg");
		var appWidth =88*scale;
		var appHeight =89*scale;
		appImg.width=appWidth;
		appImg.height=appHeight;
		
		// zhitiImg
		var zhitiImg =document.getElementById("zhitiImg");
		var zhitiWidth =171*scale;
		var zhitiHeight =95*scale;
		zhitiImg.width=zhitiWidth;
		zhitiImg.height=zhitiHeight;
		
		// qrcodeImg
		var qrcodeImg =document.getElementById("qrcodeImg");
		var qrcodeWidth =176*scale;
		var qrcodeHeight =176*scale;
		qrcodeImg.width=qrcodeWidth;
		qrcodeImg.height=qrcodeWidth;
		
		// praiseImg
		var likeImg =document.getElementById("likeImages");
		var likeWidth =36*scale;
		var likeHeight =30*scale;
		likeImg.width=likeWidth;
		likeImg.height=likeHeight;
		
		//backImg
		var backImg =document.getElementById("backImg");
		var backWidth =531*scale;
		var backHeight =136*scale;
		backImg.width=backWidth;
		backImg.height=backHeight;
		
		//divImg
		var divImg =document.getElementById("divImg");
		var divWidth =531*scale;
		var divHeight =136*scale;
		divImg.width=divWidth;
		divImg.height=divHeight;
		
		
		// 波形
		var waveImg =document.getElementById("waveImg");
		var waveWidth =316*scale;
		var waveHeight =52*scale;
		waveImg.width=waveWidth;
		waveImg.height=waveHeight;
		
		// 人头像
		var headImg =document.getElementById("headImg");
		var headWidth =60*scale;
		var headheight =60*scale;
		headImg.width=headWidth;
		headImg.height=headheight;
		
		var monthArray=new Array
        ("Jan","Feb","Mar","Apr","May","June","July","Aug",
        "Sept","Oct","Nov","Dec");
		//audio.play()
		
		$.ajax({ 
			 type: "GET",
			 url: "/yokivoice/restful/yokiCommon/queryVoiceByFileId?fileId="+fileId,
			 dataType: "json",
			 success: function(resp){
				 var date=new Date(resp.shareDate).format("yyyyMMdd");
				 var day=date.substring(6,8);
				 var month=monthArray[parseInt(date.substring(4,6))-1];
				 var year =date.substring(0,4);
				 var time=day+" "+month+" "+year;
				 $('#voiceLength').html(resp.voiceLength);
				 if(typeof resp.userName =='undefined' || resp.userName==null || resp.userName==''){
					 $('#userNameShow').hide(); 
				 }else{
					 $('#userName').html(resp.userName);
				 }
				 
				 if(typeof resp.userPicId==='undefined' || resp.userPicId==null || resp.userPicId==''){
					// 人头像
					var headImg =document.getElementById("headImg");
					var headWidth =60*scale;
					var headheight =60*scale;
					headImg.width=headWidth;
					headImg.height=headheight;
					headImg.src="images/user_head_default.png";
				    
				 }else{
					// 人头像
					var headImg =document.getElementById("headImg");
					var headWidth =60*scale;
					var headheight =60*scale;
					headImg.width=headWidth;
					headImg.height=headheight;
					// 设置人头像 audio.src="http://"+host+"/yokivoice/restful/upload/showPic/"+fileId;
					headImg.src="http://"+host+"/yokivoice/restful/upload/showPic/"+resp.userPicId;
					DD_roundies.addRule('.circleCss', '1000px', true);
				 }
				 
				 
				 $('#shareDate').html(time);
				 $('#userVoiceId').val(resp.userVoiceId);
				 if(typeof resp.cityName =='undefined' || resp.cityName==null || resp.cityName==''){
					 $('#cityNameShow').hide(); 
				 }else{
					 $('#cityName').html(resp.cityName);
				 }
				 
				 if(typeof resp.viewSpotName==='undefined' || resp.viewSpotName==null || resp.viewSpotName==''){
					 $('#viewSpotNameShow').hide(); 
				 }else{
					 $('#viewSpotName').html(resp.viewSpotName);
				 }
			 },
			 error: function(XMLHttpRequest, textStatus, errorThrown) {
				 
			 }
		});
	});
		
		
	function setPraise(){
		
		if(flag){
			alert("你已经点赞~");
			return;
		}
		var userVoiceId =$('#userVoiceId').val();
		$.ajax({ 
			 type: "GET",
			 url: "/yokivoice/restful/yokiCommon/setPraise?userVoiceId="+userVoiceId,
			 dataType: "json",
			 success: function(resp){
				 $('#praiseCount1').prepend("该故事已经获得"+resp+"个");
				 $('#praiseCount1').show(); 
				 $('#praiseCount').hide(); 
				// 更改图片
				// praiseImg
				var likeImg =document.getElementById("likeImages1");
				var likeWidth =36*scale;
				var likeHeight =30*scale;
				likeImg.width=likeWidth;
				likeImg.height=likeHeight;
				likeImg.src="images/praise1.png";
				flag=true;
			 },
			 error: function(XMLHttpRequest, textStatus, errorThrown) {
				 
			 }
		});
	}
</script>
</html>
